<template>
	<view class="">
		<view class="flex bg-fff pt28 pb20 p20 z-index1 currend_city" >
			<view class="fw-w">当前城市：</view>
			<view class="fw-w flex1">{{$store.city.name||'未选择'}}</view>
		</view>
		<view class="flex bg-fff mt20 pt28 pb20 p20">
			<view class="color-666 fs28">定位城市：</view>
			<view class="flex1 color-zs" @click="location_city.id&&$setData('city',location_city)">
				{{location_city.name||'定位中...'}}
			</view>
			<view class="flex border-zs radius50 pl20 pr20 pt10 pb10 row-center" @click="locationCity()">
				<image src="/static/img/index/address.png" class="h30 w30" mode=""></image>
				<view class="color-232323 fs26 ml8">重新定位</view>
			</view>
		</view>
		<view class="mt20 bg-fff p20">
			<view class="fw-w fs30">热门城市</view>
			<u-empty v-if="!data.hot_city.length"></u-empty>
			<view class="flex flex-wrap tc fs28 lh1">
				<view class="w25p pl10 pr10 mt20" @click="$setData('city',item)" v-for="(item,index) in data.hot_city"
					:key="index">
					<view class="h60 pr ov-h bg-f5f radius10 line-1 pt16" :class="{'color-zs':item.id==$store.city.id}">
						{{item.name}}
					</view>
				</view>
			</view>
		</view>
		<view class="">
			<view class="" v-for="(item,index) in data.citys" :key="index">
				<view class="pl30 color-999 pt10 pb10 bg-f7f">{{item.first}}</view>
				<view class="pl30 pr30 bg-fff ">
					<view class="h80 border-b flex row-between" @click="$setData('city',item2)"
						v-for="(item2,index2) in item.value" :key="index2">
						<view class="">{{item2.name}}</view>
						<icon v-if="item2.id==$store.city.id" type="success_no_circle" size="20" :color="$zs"></icon>
					</view>
				</view>
			</view>
		</view>
		<view class="h120"></view>
		<view class="pf bottom0 left0  w-max flex">
			<!-- 	<view class="p24 flex1">
				<u-button type="warning" plain ripple @click="$navBack()">返回</u-button>
			</view> -->
			<view class="p24 flex1">
				<u-button type="warning" ripple @click="submit()">确认</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				data: {
					hot_city: '', //热门城市
					citys: '', //说有城市
				},
				location_city: '', //定位城市
			}
		},
		onLoad() {
			this.getCity()
			this.locationCity()
		},
		onShow() {
			
		},
		methods: {
			getCity() {
				this.$request('/master/commom/getCity').then(res => {
					this.data = res.data
				})
			},
			async locationCity() {
				this.location_city=''
				let params = await this.$location()
				this.$request('/master/commom/locationCity', params).then(res => {
					this.location_city = res.data
				})
			},
			submit() {
				uni.$emit(this.$params.set, this.$store.city)
				this.$navBack()
			},
		}
	}
</script>
<style lang="scss">
	.currend_city {
		position: sticky;
		top: 0;
		/* #ifdef H5 */
		top: 44px;
		/* #endif */
	}
</style>
